<!DOCTYPE HTML>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
</head>
<style type='text/css'>
    * {
        padding: 0;
        margin: 0;
    }

    .bg {
        height: 100vh;
        background: url('./img/bg_music.jpg');
        background-size: 100% 100%;
    }

    h1 {
        color: #ffffff;
        text-align: center;
        /*background: rgb(139, 113, 67, 0.6);*/
        font-size: 48px;
        text-shadow: 0 0 5px #9f9e9e, 0 0 3px #333333;
    }

    .ctrl_btn {
        position: fixed;
        top: 85vh;
        left: 50px;
        height: 48px;
        width: 48px;
        filter : invert(100%);
        -webkit-filter : invert(100%);
        background: url('./img/play.png') no-repeat;
    }

    .card {
        --slide-size: 100vmin;
        --slide-margin: 4vmin;
        height: var(--slide-size);
        margin: 0 auto;
        position: relative;
        width: var(--slide-size);
    }

    #play_button {
        height: 68px;
        width: 68px;
        color: #0aa0f7;
    }

    #background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #211f1f;
        display: flex;
    }

    #background .bg-photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        overflow: hidden;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }

    #background .bg-photo-1 {
        background: url('./img/bg_music.jpg') no-repeat center center;
    }

    #background-ie {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #211f1f;
    }

    .button1 {
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        padding: 16px 32px;
        text-align: center;
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
        border-radius: 5px;
    }

    .button1:hover {
        background-color: #4CAF50;
        color: white;
    }

</style>
<body>
<audio src='./audio/自然音01.mp3' controls='controls' preload='metadata' id='music1' hidden loop>
</audio>
<div id="background">
    <div class="bg-photo bg-photo-1" style="display: block;">
        <div id='ctrl_btn' class='ctrl_btn' onclick='play();'>

        </div>
    </div>
</div>
<!--<div id="background">-->
<!--    <h1>Lisa's Coffee</h1>-->
<!--</div>-->
<script>
    const myAuto = document.getElementById('music1')
    myAuto.play()

    function rbf() {
        const audio = document.getElementById('music1')
        audio.currentTime = 0  //重播
    }

    function play() {
        const audio = document.getElementById('music1')
        const ctrl_btn = document.getElementById('ctrl_btn')
        if (audio !== null) {
            //检测播放是否已暂停（audio.paused） 在播放器播放时返回false.
            if (audio.paused) {
                audio.play()//audio.play();//播放
                ctrl_btn.style.background = 'url(./img/pause.png) no-repeat'
            } else {
                audio.pause()// 暂停
                ctrl_btn.style.background = 'url(./img/play.png) no-repeat'
            }
        }
    }

</script>

</body>
</html>
